<template>
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>课程信息</el-breadcrumb-item>
      <el-breadcrumb-item><b>学生名单</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <div style="margin:40px 20px 20px 20px">
    <el-button type="primary" @click="attendence">考勤记录</el-button>
    <el-button type="primary" @click="startSign">发起签到</el-button>
    <el-button type="primary" @click="randomSelect">抽查考勤</el-button>
    <div v-if="randomStudentName">抽查学生：{{ randomStudentName }}</div>
  </div>

  <!-- 数据表格 -->
  <div style="margin:40px 20px 20px 20px; overflow-y: auto; height: 500px;">
    <el-table :data="tableCourse" stripe border style="width: 100%">
      <el-table-column prop="sid" label="学号"  align="center"/>
      <el-table-column prop="sname" label="姓名" align="center"/>
      <el-table-column prop="gender" label="性别" align="center"/>
      <el-table-column prop="deptname" label="学院" align="center"/>
    </el-table>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import request from "@/utils/class";
import { ElLoading, ElMessage,ElNotification } from 'element-plus';
import { useRouter } from 'vue-router';

////////////////表格///////////////////////
onMounted(()=>{
  getCourse();
})

//表格信息显示
const tableCourse = ref([]);
const randomStudentName = ref(null);

const getCourse = () => {
  //获取cid
  const selectedCid = sessionStorage.getItem('selectedCid');
  // 从 sessionStorage 获取 tid
  const loginUser = sessionStorage.getItem('loginUser');
  const user = JSON.parse(loginUser);
  const tid = user.tid;

  request({
    url: '/tselect/selfstudent',
    method: 'get',
    params: {
      cid: selectedCid,
      tid: tid
    }
  }).then(req => {
    console.log(req)
    console.log(req.data)
    if (200 == req.data.errorCode) {
      tableCourse.value = req.data.data;
    }
  })
}

//发起签到
const startSign = () => {
  const selectedCid = sessionStorage.getItem('selectedCid');

  const loginUser = sessionStorage.getItem('loginUser');
  const user = JSON.parse(loginUser);
  const tid = user.tid;

  const recordsEntity = {
    tid: tid,
    cid: selectedCid
  };

  request({
    url: '/sign/ok',
    method: 'post',
    data: recordsEntity
  }).then(req => {
    if (req.data.errorCode==200) {
      ElMessage.success("发起成功！");
    } else {
      ElMessage.error("发起失败！");
    }
  });
}

//随机点名
const randomSelect = () => {
  const selectedCid = sessionStorage.getItem('selectedCid');

  const loginUser = sessionStorage.getItem('loginUser');
  const user = JSON.parse(loginUser);
  const tid = user.tid;

  request({
    url: '/tselect/random',
    method: 'get',
    params: {
      tid: tid,
      cid: selectedCid
    }
  }).then(req => {
    if (req.data.errorCode==200) {
      randomStudentName.value = req.data.data.sname;
    } else {
      ElMessage.error(req.data.message);
    }
  });
}

//考勤跳转
const router = useRouter(); // 创建一个 router 实例

// 点击考勤记录跳转的方法
const attendence = () => {
  router.push('/teacher/attend');
};

</script>

<style scoped>
.el-breadcrumb {
  font-size: 18px;
  margin: 20px;
}

.page {
  margin-left: 30%;
}

/* 自定义滚动条样式 */
div[style*="overflow-y: auto"]::-webkit-scrollbar {
  width: 6px; /* 滚动条宽度 */
}

div[style*="overflow-y: auto"]::-webkit-scrollbar-thumb {
  background-color: #888; /* 滚动条滑块颜色 */
  border-radius: 3px; /* 滑块圆角 */
}

div[style*="overflow-y: auto"]::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 滚动条轨道颜色 */
}
</style>